Skip to main content

SwiftUI ile Full Timer Uygulaması

Tarih: 16/11/2025

Bu dökümantasyonda, SwiftUI kullanarak tamamen işlevsel bir timer (geri sayım veya kronometre) uygulaması nasıl yapılır anlatılmaktadır.


1. Gerekli Import

Bu import'un tüm dosyaların en başında olmalıdır

 import SwiftUI

2. TimerViewModel Oluşturma

Timer’ın mantığını ViewModel içinde tutmak daha düzenli olur. Burada bir ObservableObject sınıfı ile timer verilerini yönetiyoruz.

class TimerViewModel: ObservableObject {
@Published var secondsElapsed: Int = 0
@Published var isRunning = false

var timer: Timer? = nil

func start() {
guard !isRunning else { return }
isRunning = true
timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
self.secondsElapsed += 1
}
}

func pause() {
isRunning = false
timer?.invalidate()
timer = nil
}

func reset() {
pause()
secondsElapsed = 0
}

func formattedTime() -> String {
let hours = secondsElapsed / 3600
let minutes = (secondsElapsed % 3600) / 60
let seconds = secondsElapsed % 60
return String(format: "%02d:%02d:%02d", hours, minutes, seconds)
}
}

3. TimerView Oluşturma

SwiftUI view’ı ile timer arayüzünü oluşturuyoruz:

struct TimerView: View {
@StateObject private var viewModel = TimerViewModel()

var body: some View {
VStack(spacing: 40) {
Text(viewModel.formattedTime())
.font(.system(size: 60, weight: .bold, design: .monospaced))
.padding()

HStack(spacing: 30) {
Button(action: {
viewModel.start()
}) {
Text("Start")
.font(.title2)
.padding()
.background(Color.green.opacity(0.7))
.foregroundColor(.white)
.cornerRadius(10)
}

Button(action: {
viewModel.pause()
}) {
Text("Pause")
.font(.title2)
.padding()
.background(Color.orange.opacity(0.7))
.foregroundColor(.white)
.cornerRadius(10)
}

Button(action: {
viewModel.reset()
}) {
Text("Reset")
.font(.title2)
.padding()
.background(Color.red.opacity(0.7))
.foregroundColor(.white)
.cornerRadius(10)
}
}
}
.padding()
}
}

4. App Entry Point

TimerView’ı ana uygulama dosyasında çağırabilirsiniz:

@main
struct TimerApp: App {
var body: some Scene {
WindowGroup {
TimerView()
}
}
}

5. Uygulamanızı Çalıştırın

Artık uygulamanızı bitirdiniz şimdi uygulamanızı çalıştırabilirsiniz.